<template>
  <div class="article-comments">
    <!-- 评论列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- 遍历数组，循环生成 评论列表项 组件 -->
      <CmtItem :cmt="item" v-for="item in list" :key="item.com_id"> </CmtItem>
    </van-list>
    <!-- 评论列表 -->
  </div>
</template>

<script>
import CmtItem from './comment-item.vue';
import { getComments } from '@/api/comment.js';

export default {
  name: 'article-comment',
  components: { CmtItem },
  // 从 祖辈组件中 获取 共享的 provide 数据
  inject: ['aid'], // aid 文章id
  data() {
    return {
      list: [], // 评论列表
      loading: false, // 上拉加载更多的 loading
      finished: false, // 是否加载结束
      // 查询参数对象
      q: {
        type: 'a', // a->查询文章的评论，c->查询评论的回复
        source: 7923, // 文章id
        offset: null, // 分页偏移量（保存上一页最后一个评论的id）
        limit: 10, // 页容量
      },
    };
  },
  created() {
    // 保存 文章id 到 查询参数对象中
    this.q.source = this.aid;
    // 手动 进行 一次页评论的 请求，目的 提前 将 评论总数 传给父组件显示
    this.onLoad();
  },
  methods: {
    async onLoad() {
      try {
        let { data: resBody } = await getComments(this.q);
        // 将数据追加到 data中
        this.list.push(...resBody.data.results);
        // 将 总 评论数量 传给 父组件
        this.$emit('setTotalCount', resBody.data.total_count);
        // 加载状态结束
        this.loading = false;
        // 保存本页 最后一个评论的id
        this.q.offset = resBody.data.last_id;
        // 判断是否为 最后一页数据，如果是，则设置finished=true,终止触底加载功能
        if (resBody.data.results.length < this.q.limit) {
          this.finished = true;
        }
      } catch (err) {
        console.log(err);
      }
    },
  },
  computed: {},
  watch: {},
};
</script>

<style scoped lang="less">
.publish-wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.van-list {
  margin-bottom: 45px;
}
</style>